<template>
  <div>
    <el-header><PersonHeader></PersonHeader></el-header>
    <el-divider></el-divider>
    <el-container class="myCcontainer">
      <el-aside style="width: 300px;height: 100%">
        <PersonPhoto></PersonPhoto>
        <PersonMenu></PersonMenu>
      </el-aside>
      <el-main>
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item name="1">
            <template slot="title">
              <h2>密码管理</h2>
            </template>
            <el-form ref="form" :model="form" :rules="rules" label-width="80px" size="mini" style="width: 900px;margin-top: 20px;margin-left: 20px">
              <el-form-item label="原始密码" prop="oldPassword">
                <el-input type="password" style="width: 500px" v-model="form.oldPassword"></el-input>填写您的原始密码！
              </el-form-item>
              <el-form-item label="新密码" prop="newPassword">
                <el-input type="password" style="width: 500px" v-model="form.newPassword" @blur="check"></el-input>新密码至少由6个数字、大小写字母组成！
              </el-form-item>
              <el-form-item label="确认密码" prop="newPassword2">
                <el-input type="password" style="width: 500px" v-model="form.newPassword2"></el-input>再次确认您的新密码！
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit()">保存</el-button>
              </el-form-item>
            </el-form>
          </el-collapse-item>
        </el-collapse>
      </el-main>
    </el-container>
    <el-footer>
      <el-divider></el-divider>
      <el-row :gutter="20">
        <el-col :span="8" :offset="8">
          <footerx></footerx>
        </el-col>
      </el-row>
    </el-footer>
  </div>
</template>

<script>
import footerx from "../footerx";
import PersonHeader from "./components/PersonHeader";
import PersonMenu from "./components/PersonMenu";
import PersonPhoto from "./components/PersonPhoto";
import {checkStrong} from "../../assets/util";
import {CheckUserName, PersonalRegister} from "../../api/user";
import {ResetPassword} from "../../api/auth";
export default {
  name: "ModifyPassword",
  components: {PersonPhoto, PersonMenu, PersonHeader, footerx},
  data (){
    let validatePass1 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      }  else {
        if (this.form.newPassword !== '') {
          this.$refs.form.validateField('newPassword2');
        }
        callback();
      }
    };
    let validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.form.newPassword2) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      activeNames:["1"],
      form:{
        userName:'',
        oldPassword:'',
        newPassword:'',
        newPassword2:''
      },
      rules:{
        oldPassword:[
          { required: true, message: '请输入原始密码', trigger: 'blur' },
        ],
        newPassword:[
          { required: true, message: '请输入密码', trigger: 'blur' },
          { validator:validatePass1, trigger: 'blur'}
        ],
        newPassword2:[
          { required: true, message: '请输入密码', trigger: 'blur' },
          { validator:validatePass2, trigger: 'blur'}
        ]
      }
    }
  },
  methods:{
    handleChange(){

    },
    onSubmit(){
      this.register();
    },
    register(){
      this.$refs['form'].validate((valid) => {
        if (valid) {
          ResetPassword.r(this.form).then(d=>{
            this.$message(d.data.msg)
          })
        }
      });
    },
    check(){
      this.strong = checkStrong(this.form.newPassword)+"";
    }
  },
  mounted() {
    this.form.userName = sessionStorage.getItem("name");
  }
}
</script>

<style scoped>
.myCcontainer{
  margin:0 auto;
  background: azure;
  width: 1200px;
}
.el-main{
  padding: 0px 10px;
}
h2{
  margin: 0px 10px;
}

</style>